import React from 'react';
import { Card, Row, Col, Descriptions, message } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import {detail} from '@/services/Role';
import Access from './components/Access';
class Detail extends React.Component {

  constructor(props) {
    super(props);
    this.id = this.props.location.query.id;
    this.state = {detail: {}}
  }

  /* 获取详情 */
  getDetail = async () => {
    try {
      const { id } = this;
      if (!id) throw new Error('非法请求！');
      const res = await detail(id);
      const date = res.createTime ? res.createTime.split(' ') : []
      res.date = date[0] || '--'
      this.setState({detail: res});
    } catch (e) {
      !e.code && e.message ? message.error(e.message) : null;
      console.log(e)
    }
  }

  componentDidMount() {
    this.getDetail();
  }

  render() {
    const { id } = this;
    const {detail} = this.state;
    return (
      <PageContainer>
        <Card
          bodyStyle={{ paddingTop: 24, paddingBottom: 8}}
          bordered={false}>
          <Descriptions column={4} labelStyle={{ color: '#999' }}>
            <Descriptions.Item label="角色名称">{detail.name}</Descriptions.Item>
            <Descriptions.Item label="创建时间">{detail.date}</Descriptions.Item>
            <Descriptions.Item label="角色描述">{detail.describe}</Descriptions.Item>
            <Descriptions.Item label="是否为内置">{detail.isInner ? '是' : '否'}</Descriptions.Item>
          </Descriptions>
          <Row style={{ marginTop: 24, marginBottom: 24 }}>
              <Col span={2} >已权限分配：</Col>
              <Col span={12}>
                <Access id={id} disabled={true} />
              </Col>
            </Row>
        </Card>
      </PageContainer>
    );
  }
}

export default Detail;
